<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="./lib/vue-2.4.0.js"></script>
    <!-- 1.导入包 -->
    <script type="text/javascript" src="./lib/vue-router-3.0.1.js"></script>
</head>

<body>

    <div id="app">
        <router-link to="/login">登陆</router-link>
        <router-link to="/register">注册</router-link>

        <!-- 容器 -->
        <router-view></router-view>
    </div>

    <script type="text/javascript">
        // 2. 创建子组件
        var login = {
            template: '<h1>登陆组件</h1>'
        };

        var register = {
            template: '<h1>注册组件</h1>'
        };

        // 3. 创建一个路由对象
        var router = new VueRouter({
            routes: [
                { path: '/', redirect: '/login' },
                { path: '/login', component: login },
                { path: '/register', component: register }
            ],
            linkActiveClass: 'myactive' // 和激活相关的类 是vue-router给router-link设置的
        });

        // 创建 Vue实例，得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            // router: router
            router
        });
    </script>
</body>

</html>